<template>
    <el-select :size="size" v-model="dataCache.topSize" @change="filterChange">
        <el-option v-for="(item,index) in $t('form.topList')" :key="index" :label="item.label" :value="item.value"></el-option>
    </el-select>
</template>

<script>
export default {
    name: "PageOptionTop",
    model: {
        prop: 'topSize',
        event: 'change'
    },
    props: {
        size: {
            type: String,
            default: null
        },
        topSize: {
            type: Number,
            default: null
        },
    },
    data() {
        return {
            dataCache: {
                topSize: null,
            },
        }
    },
    watch: {
        // 外部改变数据
        topSize: {
            immediate: true,
            handler: function (n, o) {
                if (n != o) {
                    this.dataCache.topSize = n;
                }
            }
        }
    },
    methods: {
        // 点击选中数据
        filterChange(topSize) {
            // 对外广播事件
            this.$emit('change', topSize);
        },
    },
}
</script>

<style scoped>

</style>
